import { Header } from 'antd/es/layout/layout';
import React, { useEffect, useRef, useState } from 'react'
import { useParams, useLocation, useNavigate } from "react-router";
import { Image, Button, message, Upload, Input, Modal } from 'antd';
import {
    UploadOutlined,
    AudioOutlined,
    FrownOutlined,
    CloseSquareOutlined,
    HighlightFilled,
    DeleteFilled,
    PictureFilled,
    FormatPainterFilled,
    BuildFilled,

} from '@ant-design/icons';
import './classroom.scss'
import { getClassroomBook } from '../../api/classroom';

const { TextArea } = Input;

const Classroom = () => {
    const navigate = useNavigate()
    // 路由方法
    const location = useLocation();
    // 所有课件
    const [books, setBooks] = useState([])
    // 课件书名
    const [bookname, setBookname] = useState([])

    useEffect(() => {
        getClassroomBook({ subject: location.state.courseInfo.subject }).then(res => {
            // console.log(res.data);
            setBooks(res.data)
            const temp = []
            res.data.forEach(item => {
                temp.push(item.bookname)
            });
            setBookname(temp)
        })
    }, [])

    // 上传课件
    const props = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    // 预览ppt
    const [previewppt, setPreviewppt] = useState('')
    const showPreview = (e) => {
        // console.dir(e.target.innerText);
        setPreviewppt(
            books.find((item) => {
                return item.bookname === e.target.innerText
            })
        )
    }

    // 展示ppt
    const [showppt, setShowppt] = useState('')
    const clickShowppt = (e) => {
        // console.log(e.target.src);
        setShowppt(e.target.src)
    }

    // 发言
    const [speakOut, setSpeakOut] = useState(['第一种解法...', '第二种解法...', '第三种解法...'])
    const [sentence, setSentence] = useState('')
    const textAreaRef = useRef()

    // 退出教室
    const logoutCR = () => {

    }
    // 确认退出对话框
    const [isModalOpen, setIsModalOpen] = useState(false);

    return (
        <>
            {/* 确认退出对话框 */}
            <Modal
                title="请认真观看！"
                open={isModalOpen}
                footer={null}
                onOk={() => { setIsModalOpen(false) }}
                onCancel={() => { setIsModalOpen(false) }}
            >
            </Modal>
            <Header>
                <div className='left'>
                    <p className='appName'>嗨 课 堂</p>
                    <span className='courseName'>{location.state.courseInfo.subject}</span>
                    <span className='courseTime'>上课时间：{location.state.courseInfo.time}</span>
                </div>

                <div className='right'>
                    <CloseSquareOutlined
                        style={{ color: 'rgb(252, 232, 205)', fontSize: '30px' }}
                        onClick={() => { navigate(-1) }}
                    />
                </div>
            </Header>
            <main>
                {/* 最左侧教学ppt预览 */}
                <div className='preview'>
                    <div className='previewPicture'>
                        {previewppt && previewppt.data.map((item, index) => (
                            <img
                                key={index}
                                src={item}
                                // src='../../classroomBook/001.webp' 
                                onClick={clickShowppt}
                                style={{ margin: '10px 0', width: '100%' }}
                            />
                        ))}
                    </div>
                    <div className='previewBook'>
                        {bookname && bookname.map(item => (
                            <li
                                key={item}
                                onClick={showPreview}
                            >{item}</li>
                        ))}

                        <div
                            style={{ color: 'rgb(0, 21, 41)' }}
                            onClick={() => { }}
                        >
                            <UploadOutlined />上传课件
                        </div>

                    </div>
                </div>
                {/* 展示ppt */}
                <div className='mainpart'>
                    {showppt ? (<img src={showppt} style={{ width: '100%', height: '100%' }} />) : '画布'}
                    {/* {showppt && (<img src={showppt}  style={{width:'100%'}}/>) } */}
                </div>
                {/* 功能栏 */}
                <div className='functions'>
                    <div className='top'>
                        <div>
                            <HighlightFilled />
                            <p>画笔</p>
                        </div>
                        <div>
                            <FormatPainterFilled />
                            <p>颜色</p>
                        </div>
                        <div>
                            <BuildFilled />
                            <p>橡皮</p>
                        </div>
                        <div>
                            <PictureFilled />
                            <p>图片</p>
                        </div>
                        <div>
                            <DeleteFilled />
                            <p>清屏</p>
                        </div>


                    </div>
                    <div className='bottom'>
                        <p>手写板</p>
                        <p>拖堂</p>
                    </div>
                </div>
                {/* 对话框 */}
                <div className='chat'>
                    {/* 头像 */}
                    <div className='headPortrait'>
                        <Image preview={false} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                        <p style={{ marginLeft: '20px', color: 'greenyellow' }}>
                            <AudioOutlined />
                            老师：吴彦祖
                        </p>
                    </div>
                    <div className='chatContent'>
                        <div className='top'>
                            {
                                speakOut && speakOut.map((item, index) => (
                                    <li key={index} className='ltk-right'>{item}</li>
                                ))
                            }
                        </div>
                        <div>
                            {/* 发表情 */}
                            <div style={{ backgroundColor: 'darkgray', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                <FrownOutlined />
                                <Button
                                    onClick={async () => {
                                        if (sentence === '') return
                                        await setSpeakOut([
                                            ...speakOut,
                                            sentence
                                        ])
                                        setSentence('')
                                        console.log(textAreaRef.current);
                                        // textAreaRef.current.resizableTextArea.textArea.value = ''
                                    }}
                                >发送</Button>
                            </div>
                            {/* 发言 */}
                            <div>
                                <TextArea
                                    value={sentence}
                                    ref={textAreaRef}
                                    rows={3}
                                    onChange={(e) => { setSentence(e.target.value) }}
                                />
                            </div>
                        </div>

                    </div>
                </div>
            </main>
        </>
    )
}
export default Classroom